import { useECharts } from '@/hooks/useECharts';
import { EChartsOption } from 'echarts/types/dist/shared.d.ts';
import { useEffect } from 'react';
// import { CallbackDataParams } from 'echarts/types/dist/shared.d.ts';
// import { format, graphic } from 'echarts/core';
// import { format } from 'echarts/core';

import type { OutInStockBarType } from '../typing';
interface BarChartProps {
  outInStockBarData: OutInStockBarType.StateType;
}

export const LineCharts = ({ outInStockBarData }: BarChartProps) => {
  const { chartRef: barRef, chartInstanceRef: barChart } = useECharts();
  const { xAxisData, seriesData } = outInStockBarData;

  useEffect(() => {
    barChart.current?.setOption({
      // grid: {
      //   left: '1%',
      //   right: '1%',
      //   bottom: '1%',
      //   top: '34%',
      //   containLabel: true,
      // },
      // legend: {
      //   data: ['出库数量', '入库数量'],
      //   itemWidth: 6,
      //   itemHeight: 6,
      //   icon: 'circle',
      //   itemStyle: {
      //     // color: '#697682',
      //   },
      //   textStyle: {
      //     color: '#697682',
      //     fontSize: '.18rem',
      //   },
      // },
      // tooltip: {
      //   trigger: 'axis', // 触发类型。
      //   backgroundColor: '#233346', // 背景色
      //   borderWidth: 0,
      //   axisPointer: {
      //     // 指示器类型。
      //     type: 'line',
      //     crossStyle: {
      //       color: '#fff', // 线的颜色。
      //     },
      //   },
      //   textStyle: {
      //     color: '#fff',
      //   },
      // },
      // xAxis: [
      //   {
      //     type: 'category',
      //     data: xAxisData,
      //     // boundaryGap: false, // false时从0刻度开始
      //     axisLine: {
      //       // 坐标轴轴线
      //       show: false,
      //     },
      //     axisTick: {
      //       // 坐标轴刻度
      //       show: false,
      //     },
      //     axisLabel: {
      //       // 坐标轴刻度标签的相关设置
      //       color: '#697682',
      //       fontSize: '.12rem',
      //       rotate: 45, // 取值范围[-90, 90]
      //     },
      //     axisPointer: {
      //       type: 'shadow',
      //     },
      //   },
      // ],
      // yAxis: [
      //   {
      //     name: '单位：千克',
      //     type: 'value',
      //     // interval: 20, 值之间的间距
      //     axisLabel: {
      //       color: '#697682',
      //       formatter: '{value}',
      //       fontSize: '.11rem',
      //       // margin: 10 // 坐标轴文字距离坐标轴的距离
      //     },
      //     splitLine: {
      //       // 坐标轴在 grid 区域中的分隔线。
      //       lineStyle: {
      //         type: 'dotted',
      //         color: ['rgba(130, 144, 157, 0.18)'],
      //       },
      //     },
      //     nameTextStyle: {
      //       color: '#697682',
      //       fontSize: '.16rem', // 设置单位字体大小
      //     },
      //   },
      // ],
      // series: [
      //   {
      //     name: '出库数量',
      //     type: 'line',
      //     smooth: true,
      //     showSymbol: false,
      //     tooltip: {
      //       valueFormatter: function (value) {
      //         return value as number;
      //       },
      //     },
      //     itemStyle: {
      //       color: '#2FB3FF',
      //     },
      //     data: seriesData[0],
      //   },
      //   {
      //     name: '入库数量',
      //     type: 'line',
      //     smooth: true,
      //     showSymbol: false,
      //     tooltip: {
      //       valueFormatter: function (value) {
      //         return value as number;
      //       },
      //     },
      //     itemStyle: {
      //       color: '#71F0A2',
      //     },
      //     data: seriesData[1],
      //   },
      // ],
      animation: false,
      // backgroundColor: '#1C2128',
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(255, 255, 255, 0.1)',
        borderColor: 'rgba(255, 255, 255, 0.2)',
        textStyle: {
          color: '#fff',
          fontSize: 8,
        },
      },
      legend: {
        data: ['生产温度', '出水温度', '水冷温度', '制冷量'],
        top: '0px',
        right: '20px',
        textStyle: {
          color: '#ffffff',
          fontSize: 8,
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '0%',
        top: '50px',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: Array.from({ length: 10 }, (_, i) => i),
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.2)',
          },
        },
        axisLabel: {
          color: '#ffffff',
          fontSize: 8,
        },
      },
      yAxis: [
        {
          type: 'value',
          name: '温度 (°C)',
          min: 0,
          position: 'left',
          nameTextStyle: {
            fontSize: 8, // 设置字体大小为16
          },
          // max: 35,
          // interval: 5,
          axisLine: {
            // show: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.2)',
            },
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 8,
            formatter: '{value}°C',
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.1)',
            },
          },
        },
        {
          type: 'value',
          name: '重量 (kg)',
          // min: 400,
          // max: 1000,
          // interval: 100,
          // position: 'right',
          position: 'right',
          nameTextStyle: {
            fontSize: 8, // 设置字体大小为16
          },
          axisLine: {
            // show: true,
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.2)',
            },
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 8,
            formatter: '{value}kg',
          },
          splitLine: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: '生产温度',
          type: 'line',
          smooth: true,
          data: Array.from({ length: 100 }, () => Math.random() * 20 + 10),
          itemStyle: {
            color: '#4CAF50',
          },
          lineStyle: {
            width: 2,
          },
        },
        {
          name: '出水温度',
          type: 'line',
          smooth: true,
          data: Array.from({ length: 100 }, () => Math.random() * 15 + 8),
          itemStyle: {
            color: '#FF9800',
          },
          lineStyle: {
            width: 2,
          },
        },
        {
          name: '水冷温度',
          type: 'line',
          smooth: true,
          data: Array.from({ length: 100 }, () => Math.random() * 12 + 6),
          itemStyle: {
            color: '#9C27B0',
          },
          lineStyle: {
            width: 2,
          },
        },
        {
          name: '制冷量',
          type: 'line',
          smooth: true,
          yAxisIndex: 1,
          data: Array.from({ length: 100 }, () => Math.random() * 300 + 500),
          itemStyle: {
            color: '#2196F3',
          },
          lineStyle: {
            width: 2,
          },
        },
      ],
    } as EChartsOption);
  }, [barChart, seriesData, xAxisData]);

  return <div style={{ height: '100%' }} ref={barRef}></div>;
};
